<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>

<body>
<div id="app">
    <el-container style="height: 600px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-menu-item-group>
                    <el-menu-item>[[${session.user}]]</el-menu-item>
                    <el-menu-item @click="accountLogin">商品管理</el-menu-item>
                    <el-menu-item @click="dialogVisible = true">商品上传</el-menu-item>
                    <el-menu-item
                            onclick="window.location.href = 'http://localhost:8080/show.html'">返回购物区</el-menu-item>
                </el-menu-item-group>
                <el-menu-item
                        onclick="window.location.href = 'http://localhost:8080/denglu.html'">退出</el-menu-item>
                </el-menu-item-group>
            </el-menu>
        </el-aside>

        <el-container>
            <el-main>
                <el-table :data="tableData" stripe>
                    <el-table-column prop="names" label="名称" width="140">
                    </el-table-column>
                    <el-table-column prop="prices" label="价格" width="140">
                    </el-table-column>
                    <el-table-column prop="numbers" label="剩余数量" width="140">
                    </el-table-column>
                    <el-table-column prop="xiajia" label="操作" width="140">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
                                       type="text">下架</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-main>
        </el-container>
    </el-container>



    <el-dialog title="上传物品" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="物品名称" prop="names">
                <el-input v-model="form.names"></el-input>
            </el-form-item>
            <el-form-item label="所属类别" prop="type">
                <el-select v-model="form.type" placeholder="请选择商品类别">
                    <el-option label="女装男装" value="女装男装"></el-option>
                    <el-option label="鞋类箱包" value="鞋类箱包"></el-option>
                    <el-option label="护肤彩妆" value="护肤彩妆"></el-option>
                    <el-option label="百货市场" value="百货市场"></el-option>
                    <el-option label="手机数码" value="手机数码"></el-option>
                    <el-option label="家电办公" value="家电办公"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="much">
                <el-input v-model="form.prices"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="numbers">
                <el-input v-model="form.numbers"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button type="primary" @click="addBrand">确 定</el-button>
            </span>
    </el-dialog>
</div>



</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        mounted() {
            //当页面加载完成发送异步请求获取数据
            this.select1();
        },
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                form: {
                    names: '',
                    numbers: '',
                    prices: '',
                    type: ''
                }
            }
        },
        methods: {
            accountLogin() { // 商品管理
                this.select1();
            },


            select1() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectSellerNames?seller=唐庆"
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    console.log(resp.data)
                })
            },


            deleteRow(index, rows) {
                console.log(rows[index].sellers);
                console.log(rows[index].names);
                axios({
                    method: "get",
                    url: "http://localhost:8080/deleteShowNames?names=" + rows[index].names + "&sellers=" + rows[index].sellers
                }).then(function (resp) {
                    rows.splice(index, 1);
                })
            },

            addBrand() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/insertShow",
                    headers: { 'content-type': 'application/x-www-form-urlencoded' },
                    data: _this.form
                }).then(function (resp) {
                    alert("上传成功");
                    _this.select1();
                })
                this.resetForm();

            },
            resetForm() {
                this.dialogVisible = false;
                // 通过ref找到要重置的form,调用resetFields方法进行重置
                this.$refs.form.resetFields();
            }


        }
    })
</script>

</html>